<template>
  <div>
    <el-dialog
      title="打印提现申请单"
      :visible.sync="dialogVisible"
      @close="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- 申请单表格 -->
      <div>
        <vue-easy-print ref="listPrint">
          <div style="overflow: hidden">
            <!-- 打印审批单 -->
            <div class="flex-row row-center print-top30">
              <text class="print-title">付款申请单</text>
            </div>

            <div class="flex-row print-top30 print-height">
              <div class="flex-row">
                <div class="print-col4 flex-row">申请部门</div>
              </div>
              <div class="flex-row">
                <div class="print-col4 flex-row row-center">
                  {{ applyTime }}
                </div>
              </div>
              <div class="flex-row">
                <div class="print-col4">编号</div>
              </div>
            </div>
            <div>
              <div class="flex-row">
                <div>
                  <div class="flex-row border-tlr">
                    <div class="print-col3 border-right flex-row row-center">
                      收款单位
                    </div>
                    <div class="print-col5 p-lr20">
                      {{ form.account.bank_account }}
                    </div>
                  </div>
                  <div class="flex-row border-tlr">
                    <div class="print-col3 border-right flex-row row-center">
                      银行账号
                    </div>
                    <div class="print-col5 p-lr20">
                      {{ form.account.bank_card }}
                    </div>
                  </div>
                  <div class="flex-row border">
                    <div class="print-col3 border-right flex-row row-center">
                      开户行
                    </div>
                    <div class="print-col5 p-lr20">
                      {{ form.account.bank_name }}
                    </div>
                  </div>
                  <div class="flex-row row-between row2 border-blr">
                    <div
                      class="print-col3 flex-row col-center row-center row2 border-right"
                    >
                      金额
                    </div>
                    <div class="print-col5 flex-col row2">
                      <div class="p-lr20">
                        {{ rmbamount(form.received_amount) }}
                      </div>
                      <div class="border-top print-col5 p-lr20">
                        ￥{{ form.received_amount }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="flex-row row-center border-tbr print-row4">
                    <div class="flex-col">
                      <div class="flex-row row-center">
                        <text>付款原因</text>
                      </div>
                      <div class="flex-col">
                        <text>店铺提现</text>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="flex-col print-attach">
                    附件<span style="margin-top: 50px">个</span>
                  </div>
                </div>
              </div>
              <div class="flex-row print-row-width border-blr">
                <div class="flex-col border-right">
                  <div class="print-col3 flex-row row-center">单位领导</div>
                  <div class="print-col3 border-top"></div>
                </div>
                <div class="flex-col border-right">
                  <div class="print-col3 flex-row row-center">财务主管</div>
                  <div class="print-col3 border-top"></div>
                </div>
                <div class="flex-col border-right">
                  <div class="print-col3 flex-row row-center">部门主管</div>
                  <div class="print-col3 border-top"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col3 flex-row row-center">经办人</div>
                  <div class="print-col3 border-top"></div>
                </div>
              </div>
              <div class="flex-row print-top30">
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">会计主管</div>
                  <div class="print-col2"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">记账</div>
                  <div class="print-col2"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">复核</div>
                  <div class="print-col2"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">出纳</div>
                  <div class="print-col2"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">制单</div>
                  <div class="print-col2"></div>
                </div>
                <div class="flex-col">
                  <div class="print-col2 flex-row row-center">签收</div>
                  <div class="print-col2"></div>
                </div>
              </div>
            </div>
          </div>
        </vue-easy-print>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="printRow">打印预览</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";
import { formatDate } from "@/utils/DateTime.js";
export default {
  components: {
    vueEasyPrint,
  },
  data() {
    return {
      /*左边长度*/
      formLabelWidth: "120px",
      /*是否显示*/
      dialogVisible: false,
      applyTime: "",
    };
  },
  props: ["open", "form"],
  watch: {
    open: function (n, o) {
      this.dialogVisible = this.open;
    },
  },
  computed: {
    rmbamount() {
      return function (val) {
        return this.toChineseNumber(val);
      };
    },
  },
  created() {
    this.applyTime = formatDate(new Date(), "yyyy年MM月dd日hh:mm");
  },
  mounted() {
    // this.printRow();
  },
  methods: {
    // 打印
    async printRow(row) {
      this.$nextTick(() => {
        this.$refs.listPrint.print();
      });
    },
    /*关闭弹窗*/
    dialogFormVisible(e) {
      this.$emit("close");
    },
    toChineseNumber(Num) {
      //判断如果传递进来的不是字符的话转换为字符
      if (typeof Num == "number") {
        Num = new String(Num);
      }
      Num = Num.replace(/,/g, ""); //替换tomoney()中的“,”
      Num = Num.replace(/ /g, ""); //替换tomoney()中的空格
      Num = Num.replace(/￥/g, ""); //替换掉可能出现的￥字符
      if (isNaN(Num)) {
        //验证输入的字符是否为数字
        //alert("请检查小写金额是否正确");
        return "";
      }
      //字符处理完毕后开始转换，采用前后两部分分别转换
      var part = String(Num).split(".");
      var newchar = "";
      //小数点前进行转化
      for (var i = part[0].length - 1; i >= 0; i--) {
        if (part[0].length > 10) {
          return "";
          //若数量超过拾亿单位，提示
        }
        var tmpnewchar = "";
        var perchar = part[0].charAt(i);
        switch (perchar) {
          case "0":
            tmpnewchar = "零" + tmpnewchar;
            break;
          case "1":
            tmpnewchar = "壹" + tmpnewchar;
            break;
          case "2":
            tmpnewchar = "贰" + tmpnewchar;
            break;
          case "3":
            tmpnewchar = "叁" + tmpnewchar;
            break;
          case "4":
            tmpnewchar = "肆" + tmpnewchar;
            break;
          case "5":
            tmpnewchar = "伍" + tmpnewchar;
            break;
          case "6":
            tmpnewchar = "陆" + tmpnewchar;
            break;
          case "7":
            tmpnewchar = "柒" + tmpnewchar;
            break;
          case "8":
            tmpnewchar = "捌" + tmpnewchar;
            break;
          case "9":
            tmpnewchar = "玖" + tmpnewchar;
            break;
        }
        switch (part[0].length - i - 1) {
          case 0:
            tmpnewchar = tmpnewchar + "元";
            break;
          case 1:
            if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
            break;
          case 2:
            if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
            break;
          case 3:
            if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
            break;
          case 4:
            tmpnewchar = tmpnewchar + "万";
            break;
          case 5:
            if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
            break;
          case 6:
            if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
            break;
          case 7:
            if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
            break;
          case 8:
            tmpnewchar = tmpnewchar + "亿";
            break;
          case 9:
            tmpnewchar = tmpnewchar + "拾";
            break;
        }
        var newchar = tmpnewchar + newchar;
      }
      //小数点之后进行转化
      if (Num.indexOf(".") != -1) {
        if (part[1].length > 2) {
          // alert("小数点之后只能保留两位,系统将自动截断");
          part[1] = part[1].substr(0, 2);
        }
        for (i = 0; i < part[1].length; i++) {
          tmpnewchar = "";
          perchar = part[1].charAt(i);
          switch (perchar) {
            case "0":
              tmpnewchar = "零" + tmpnewchar;
              break;
            case "1":
              tmpnewchar = "壹" + tmpnewchar;
              break;
            case "2":
              tmpnewchar = "贰" + tmpnewchar;
              break;
            case "3":
              tmpnewchar = "叁" + tmpnewchar;
              break;
            case "4":
              tmpnewchar = "肆" + tmpnewchar;
              break;
            case "5":
              tmpnewchar = "伍" + tmpnewchar;
              break;
            case "6":
              tmpnewchar = "陆" + tmpnewchar;
              break;
            case "7":
              tmpnewchar = "柒" + tmpnewchar;
              break;
            case "8":
              tmpnewchar = "捌" + tmpnewchar;
              break;
            case "9":
              tmpnewchar = "玖" + tmpnewchar;
              break;
          }
          if (i == 0) tmpnewchar = tmpnewchar + "角";
          if (i == 1) tmpnewchar = tmpnewchar + "分";
          newchar = newchar + tmpnewchar;
        }
      }
      //替换所有无用汉字
      while (newchar.search("零零") != -1)
        newchar = newchar.replace("零零", "零");
      newchar = newchar.replace("零亿", "亿");
      newchar = newchar.replace("亿万", "亿");
      newchar = newchar.replace("零万", "万");
      newchar = newchar.replace("零元", "元");
      newchar = newchar.replace("零角", "");
      newchar = newchar.replace("零分", "");
      if (newchar.charAt(newchar.length - 1) == "元") {
        newchar = newchar + "整";
      }
      return newchar;
    },
  },
};
</script>

<style media="print" lang="scss" scoped>
@page {
  size: auto A4 landscape;
  margin: 10mm;
}
.print-title {
  font-size: 20px;
  font-weight: bold;
}
.print-height {
  height: 50px;
}
.print-row-width {
  width: 680px;
}
.print-label {
  font-size: 14px;
}
.print-text {
  font-size: 14px;
}

.print-top30 {
  margin-top: 30px;
}
.print-top20 {
  margin-top: 20px;
}
.print-left200 {
  margin-left: 200px;
}
.print-left160 {
  margin-left: 160px;
}
.print-col {
  width: 60px;
}
.print-col2 {
  width: 120px;
}
.print-col3 {
  height: 60px;
  line-height: 60px;
  // padding: 0 20px;
  width: 170px;
}
.print-col4 {
  height: 60px;
  line-height: 60px;
  // padding: 0 20px;
  width: 200px;
}
.print-col5 {
  height: 60px;
  line-height: 60px;
  // padding: 0 20px;
  width: 300px;
}
.print-col6 {
  height: 300px;
  width: 40px;
}
.print-row4 {
  width: 208px;
  height: 304px;
  padding: 20px 20px;
}
.print-attach {
  width: 20px;
  height: 303px;
  margin-left: 10px;
}
.border-top {
  border-top: 1px solid #000000;
}
.border-bottom {
  border-bottom: 1px solid #000000;
}
.border-left {
  border-left: 1px solid #000000;
}
.border-right {
  border-right: 1px solid #000000;
}
.border-tl {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
}
.border-tr {
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}
.border-tlr {
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
.border-tbr {
  border-bottom: 1px solid #000000;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}
.border-blr {
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
}
.border {
  border: 1px solid #000000;
}
.bg-dark {
  background: #000000;
}
.row2 {
  height: 120px;
}
</style>
